// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    /* //要接受的数据名称
    aaa:{
      //type 要接受的数据的类型
      type:String,
      //value 默认值
      value:''
    } */
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    /* tabs: [{
      id: 0,
      name: '首页',
      isActive: true
    },
    {
      id: 1,
      name: '原创',
      isActive: false
    },
    {
      id: 2,
      name: '分类',
      isActive: false
    },
    {
      id: 3,
      name: '关于',
      isActive: false
    },
  ] */
  },

  /* 
    1、页面.js文件中存放事件回调函数的时候存放在data同层级下!!!
    2、组件.js文件中存放事件回调函数的时候必须要存在在methods中! ! !

  */
  methods: {
    hanldeItemTap(e){
      /* 
      1 绑定点击事件 需要在methods中绑定
      2 获取被点击的索引
      3 获取原数组
      4 对数组循环
        1 给每一个循环性 选中的属性 改为 false
        2 给 当前的而索引 的项 添加激活选中效果就可以了

      5 点击事件触发的时候
        触发父组件中的自定义事件 同时传递数据给 父组件
        this.triggerEvent("父组件自定义事件的名称"，要传递的参数)
      */

      //2 获取索引
      const {index} = e.currentTarget.dataset

      //5 触发父组件中的自定义事件 同时传递数据
      this.triggerEvent("itemChange",{index})


      /* //3 获取data 中的数组
      //解决对复杂 类型进行结构的时候 复制一份 变量的引用而已
      //最严谨的做法 重新拷贝一份数组 在对这个数组的备份经行处理
      // let tabs=JSON.parse(JSON.stringify(this.data.tabs));
      //不要直接修改 this.data.数据
      let {tabs} = this.data     //let tabs = this.data.tabs  等价
      //4 循环数组
      // [].forEach 遍历循环数组 遍历数组的时候 修改了v 也就导致原数组被修改
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)

      this.setData({
        tabs
      }) */
    }
  }
})